<template>
	<div class="main">
      <MyHeader title="tabBar 案例" background="gold"></MyHeader>
       
			 <!-- 中间动态组件 -->
			 <components :is="comName"></components>

			<MyTabBar :arr="tabList" @change="changeFn"></MyTabBar>
	</div>
</template>

<script>
// todo  局部引入     头    中间（动态组件）    尾
  import MyHeader from './components/MyHeader.vue'
  import MyTabBar from './components/MyTabBar.vue'

	// 引入第三方包
	import './assets/fonts/iconfont.css'

	// 导入中间动态组件
	import MyGoodsList from './views/MyGoodsList.vue'
	import MyGoodsSearch from './views/MyGoodsSearch.vue'
	import MyUserInfo from './views/MyUserInfo.vue'

	export default {
		data() {
			return {
				tabList: [ // 底部导航的数据
					{
						iconText: "icon-shangpinliebiao",
						text: "商品列表",
						componentName: "MyGoodsList",
					},
					{
						iconText: "icon-sousuo",
						text: "商品搜索",
						componentName: "MyGoodsSearch",
					},
					{
						iconText: "icon-user",
						text: "我的信息",
						componentName: "MyUserInfo",
					},
				],

				comName: 'MyGoodsList'   // 默认显示商品列表栏
			};
		},

    methods: {
			  changeFn(comName){
					// console.log(comName);
            this.comName = comName
				}
		},

		components: {
			  MyHeader,
				MyTabBar,
				MyGoodsList,
				MyGoodsSearch,
				MyUserInfo
		}
	};
</script>

<style scoped>
	.main {
		padding-top: 45px;
		padding-bottom: 51px;
	}
</style>
